﻿<FluentGrid Justify="JustifyContent.FlexStart" Spacing="3">
    <FluentGridItem xs="12" sm="6">
        <FluentSortableList Id="filter" ItemFilter="@(i => i.Disabled)" Items="items1" OnUpdate="@SortListOne" Context="item">
             <ItemTemplate>@item.Name</ItemTemplate>
         </FluentSortableList>
     </FluentGridItem>

    <FluentGridItem xs="12" sm="6">
        <FluentSortableList Id="filter2" ItemFilter="@(i => i.Id > 6)" Items="items2" OnUpdate="@SortListTwo" Context="item" Style="--fluent-sortable-list-filtered: var(--accent-base-color);">
            <ItemTemplate>@item.Name</ItemTemplate>
        </FluentSortableList>
    </FluentGridItem>
 </FluentGrid>

@code {
    public class Item
    {
        public int Id { get; set; }
        public string Name { get; set; } = "";

        public bool Disabled { get; set; } = false;
    }

    public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
    public List<Item> items2 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    // on initialized, set a random item in the list to disabled
    protected override void OnInitialized()
    {
        var random = new Random();
        var randomIndex = random.Next(0, items1.Count);
        items1[randomIndex].Disabled = true;
    }


    private void SortListOne(FluentSortableListEventArgs args)
    {
        if (args is null || args.OldIndex == args.NewIndex)
        {
            return;
        }

        var oldIndex = args.OldIndex;
        var newIndex = args.NewIndex;

        var items = this.items1;
        var itemToMove = items1[oldIndex];
        items.RemoveAt(oldIndex);

        if (newIndex < items1.Count)
        {
            items1.Insert(newIndex, itemToMove);
        }
        else
        {
            items1.Add(itemToMove);
        }
    }

    private void SortListTwo(FluentSortableListEventArgs args)
    {
        if (args is null || args.OldIndex == args.NewIndex)
        {
            return;
        }

        var oldIndex = args.OldIndex;
        var newIndex = args.NewIndex;

        var items = this.items2;
        var itemToMove = items2[oldIndex];
        items.RemoveAt(oldIndex);

        if (newIndex < items2.Count)
        {
            items2.Insert(newIndex, itemToMove);
        }
        else
        {
            items2.Add(itemToMove);
        }
    }
}
